import Icon from '@/components/Icon';
import CustomNavBar from '@/components/StandNavBar/CustomNavBar';
import { navigationBarTextColor } from '@/src/config';
import utils from '@/utils';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { useMemo } from 'react';
import { getDispatch } from '../../../dva';
import styles from './index.weapp.module.scss';

const MoreNavBar = ({
  onDbClick,
  title,
  position,
  showIcon: { search, allGoods, cart, userCenter } = {},
}) => {
  const dispatch = useMemo(() => {
    return getDispatch();
  }, []);

  const list = [
    {
      enabled: search,
      icon: 'a-tubiaoai_huaban2fuben31',
      onClick: () => {
        Taro.navigateTo({ url: '/mainSubPack/searchResult/index' });
      },
    },
    {
      enabled: allGoods,
      icon: 'a-9-9_huaban2fuben10',
      onClick: () => {
        Taro.navigateTo({
          url: `/mainSubPack/appProducts/index?title=${encodeURIComponent(
            '全部商品',
          )}&goodsSelectInfo={"type":"4"}`,
        });
      },
    },
    {
      enabled: cart,
      icon: 'a-2',
      onClick: () => {
        utils.goCartPage(dispatch);
      },
    },
    {
      enabled: userCenter,
      icon: 'a-tubiaoai_huaban2fuben7',
      onClick: () => {
        utils.goMePage(dispatch);
      },
    },
  ];

  return (
    <CustomNavBar
      className={`${styles.MoreNavBar} customNavigationBarStyle`}
      position={position}
      menuBlock
    >
      <View className="left">
        {list.map(({ enabled, icon, onClick }) => {
          if (!enabled) {
            return null;
          }

          return (
            <View className="icon-wrap" key={icon} onClick={onClick}>
              <Icon className="icon" name={icon} size={36} color={navigationBarTextColor} />
            </View>
          );
        })}
      </View>

      <View className="center omit" onClick={onDbClick}>
        {title}
      </View>
    </CustomNavBar>
  );
};

export default MoreNavBar;
